<template>
	<view :style="image_style">
		<image :style="image_style" :mode="mode" :lazy-load="lazyLoad" :autoBitmapRecycle="recycle" :src="temp_image" @load="load"
		 @error="error" @click="click"></image>
	</view>
</template>

<script>
	import {
		other
	} from "../../js/global.js"
	/**
	 * image 图片
	 * @description 图片组件
	 * @tutorial https://dnvue.dengqichang.cn/component/basic_component/n-image.html
	 * @property {String} src 显示图片的 URL
	 * @property {String} placeholder 占位图的 URL
	 * @property {String, Number} width 宽度
	 * @property {String, Number} height 高度
	 * @property {String} radius 圆角
	 * @property {String} mode 图片裁剪、缩放的模式
	 *  @value scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
	 *  @value aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
	 *  @value aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
	 *  @value widthFix 宽度不变，高度自动变化，保持原图宽高比不变
	 *  @value heightFix 高度不变，宽度自动变化，保持原图宽高比不变
	 * @property {Boolean} recycle 控制当图片滚出屏幕时是否回收相关内存，Android有效
	 * @property {Boolean} fade-show 图片显示动画效果，Android有效
	 * @property {Boolean} lazy-load 图片懒加载。只针对page与scroll-view下的image有效
	 *  @value px
	 *  @value rpx
	 * @property {Object} style-custom 自定义组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
	 * @event {Function()} click 点击事件
	 */
	export default {
		name: "nImage",
		props: {
			src: {
				type: String, //显示图片的 URL
				default: ''
			},
			placeholder: {
				type: String, //占位图的 URL，在图片下载过程中将展示占位图，图片下载完成后将显示src中指定的图片
				default: other.placeholder
			},
			width: {
				type: [String, Number], //宽度
				default: "300"
			},
			height: {
				type: [String, Number], //高度
				default: "225"
			},
			mode: {
				type: String, //图片裁剪、缩放的模式
				default: 'scaleToFill'
			},
			radius: {
				type: [String, Number], //圆角
				default: 0
			},
			recycle: {
				type: Boolean, //一个布尔标志位控制当图片滚出屏幕时是否回收相关内存，Android有效
				default: true
			},
			fadeShow: {
				type: Boolean, //图片显示动画效果，Android有效
				default: false
			},
			lazyLoad: {
				type: Boolean, //图片懒加载。只针对page与scroll-view下的image有效
				default: false
			}
		},
		data() {
			return {
				temp_image: "" //临时图片地址
			};
		},
		watch: {
			src: {
				handler() {
					if (!!this.src) {
						this.temp_image = this.src
					} else {
						this.temp_image = this.placeholder
					}
				},
				immediate: true
			}
		},
		computed: {
			image_style() {
				let style = {
					width: `${this.width}rpx`,
					height: `${this.height}rpx`,
					borderRadius: `${this.radius}rpx`
				};
				return this.$store.tools.styleInto(style);
			}
		},
		methods: {
			//当加载完成 src 指定的图片时，load事件将被触发
			load(e) {
				this.$emit('load', e);
			},
			error(e) {
				this.temp_image = this.placeholder;
			},
			//点击事件
			click(e) {
				this.$emit('click', e);
			}
		}
	}
</script>

<style>

</style>
